@import "./com";
// div {
//     width: vw(125);
//     height: vw(125);
// }
header {
    .h_top {
        width: vw(750);
        height: vw(150);
        display: flex;
        justify-content: space-around;
        align-items: center;
        >img {
            width: vw(125);
        }
        >.inp {
            position: relative;
            width: vw(270);
            height: vw(52);
            border: 1px solid $col;
            border-radius: vw(26);
            box-sizing: border-box;
            &::after {
                content: "";
                position: absolute;
                right: vw(16);
                top: vw(8);
                width: vw(36);
                height: vw(34);
                background: url(/images/index/搜索矩.png) no-repeat top/cover;
            }
            >input {
                width: vw(183);
                height: vw(34);
                font-size: vw(24);
                margin-left: vw(27);
                line-height: vw(34);
                border: none;
                outline: none;
                margin-top: vw(10);
            }
        }
    }
    // 地区
    .sel {
        position: relative;
        select {
            width: vw(160);
            height: vw(60);
            border: vw(1) solid $col;
            box-sizing: border-box;
            appearance: none;
            padding-left: vw(20);
            font-size: vw(26);
        }
        i {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: vw(-10);
            margin-right: vw(16);
            width: 0;
            height: 0;
            border: vw(13) solid transparent;
            border-top: vw(20) solid $col;
            //穿透
            pointer-events: none;
        }
    }
    .h_bt {
        position: relative;
        width: vw(750);
        overflow: hidden;
        ul {
            width: vw(750*3);
            font-size: 0;
            li {
                display: inline-block;
                white-space: nowrap;
                width: vw(750);
                height: vw(287);
                img {
                    width: 100%;
                }
            }
        }
        .bar {
            position: absolute;
            top: vw(186);
            width: 100%;
            height: vw(10);
            background-color: rgba(0, 0, 0, .5);
            div {
                position: absolute;
                left: vw(150);
                width: vw(130);
                height: vw(10);
                background-color: rgba(255, 255, 255, .5);
            }
        }
    }
}

// 主要内容
main {
    width: vw(750);
    // 导航栏
    .tuan {
        width: 100%;
        height: vw(100);
        line-height: vw(100);
        margin-top: vw(35);
        padding-left: vw(22);
        box-sizing: border-box;
        img {
            vertical-align: middle;
        }
        span:nth-of-type(2) {
            float: right;
            margin-right: vw(20);
            img {
                width: vw(27);
                height: vw(25);
            }
        }
    }
    // 四个盒子
    .hezi {
        width: 100%;
        height: vw(250);
        ul {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            li {
                margin-top: vw(30);
                img {
                    width: vw(300);
                }
            }
        }
    }
    // 猜你喜欢
    .cnxh {
        width: 100%;
        height: vw(100);
        line-height: vw(100);
        margin-top: vw(90);
        padding-left: vw(22);
        box-sizing: border-box;
        img {
            vertical-align: middle;
        }
        span:nth-of-type(2) {
            float: right;
            margin-right: vw(20);
            img {
                width: vw(27);
                height: vw(25);
            }
        }
    }
}

// 商品
.xiaochi {
    width: 100%;
    .zuo {
        position: relative;
        margin-top: vw(43);
        display: flex;
        height: vw(170);
        img {
            float: left;
            width: vw(255);
            height: vw(170);
        }
        .txt {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: vw(20);
            p:nth-of-type(1) {
                font-size: vw(30);
                font-weight: bolder;
                i {
                    position: absolute;
                    top: vw(10);
                    right: vw(15);
                    font-size: vw(22);
                    color: $font;
                }
            }
            p:nth-of-type(2) {
                font-size: vw(22);
                color: $font;
            }
            p:nth-of-type(3) {
                font-size: vw(32);
                color: $col;
                i {
                    position: absolute;
                    right: vw(15);
                    bottom: vw(10);
                    font-size: vw(22);
                    color: $font;
                }
            }
        }
    }
}

// 底部导航栏
nav {
    position: sticky;
    bottom: 0;
    margin-top: vw(14);
    width: vw(750);
    .nav_di {
        width: 100%;
        ul {
            display: flex;
            width: 100%;
            li {
                flex-basis: 25%;
                display: inline-block;
                padding-left: vw(57);
                a {
                    display: flex;
                    width: vw(77);
                    height: vw(77);
                    img {
                        width: 100%;
                        vertical-align: auto;
                    }
                }
            }
        }
    }
}